<template>
    <div class="cart-box">
        <div class="cart-top">
            <van-nav-bar title="购物车" />
        </div>
        <div class="cart-center">
            <div>
                <van-icon name="circle" color="red" style="transform: scale(0.5);" />
                <span>30天无忧退货</span>
            </div>
            <div>
                <van-icon name="circle" color="red" style="transform: scale(0.5);" />
                <span>48小时极速退款</span>
            </div>
            <div>
                <van-icon name="circle" color="red" style="transform: scale(0.5);" />
                <span>满88包邮</span>
            </div>
        </div>
        <div class="cart-content">
            <div class="cart-content-top" v-for="item in cartsList" style="margin-top: 10px; background-color: #fff;">
                <van-checkbox-group class="cart-content-left" v-model="checkedArr" @change="checkOneHanlder">
                    <van-checkbox :name="item.id" v-model="checked" @click="getIdHanlder(item)">
                    </van-checkbox>
                </van-checkbox-group>
                <div>
                    <van-swipe-cell>
                        <van-card :price="item.retail_price" :title="item.goods_name" :thumb="item.list_pic_url"
                            :num="item.number" style="width: 300px;background-color: #fff;margin-left: 10px;">
                            <template #footer>
                                <van-button size="mini" @click="getIdHanlderItem(item)"
                                    :disabled="item.number == 1">按钮-</van-button>
                                <van-button size="mini" @click="getIdHanlderAddItem(item)">按钮+</van-button>
                            </template>
                        </van-card>
                        <template #right>
                            <van-button square text="删除" type="danger" class="delete-button" />
                        </template>
                    </van-swipe-cell>
                </div>

            </div>
            <van-submit-bar :price="sub * 100" button-text="提交订单" style="position: fixed; left: 0;bottom: 50px;"
                button-color="rgb(206, 166, 42)" @submit="$router.push('/order')">
                <van-checkbox v-model="checkedAll" @click="checkAllHanlder">全选</van-checkbox>
            </van-submit-bar>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getCartApi } from '@/api/cart'
const checked = ref<boolean>(false)
const checkedAll = ref<boolean>(false)
const checkedArr = ref<string[]>([])

// 购物车数据
const cartsList = ref<CartNs.ICartListDataItem[]>([])
// 表示总价
const sub = ref<number>(0)
const subitem = ref<number>(0)

const numPrice = ref()
// 定义一个方法，请求购物车的数据
const getCartsList = async () => {
    const res = await getCartApi('66')
    cartsList.value = res.data
}
// 点击减按钮事件
const getIdHanlderItem = (item: any) => {
    item.number--
    numPrice.value = item.retail_price * item.number
    if (checkedArr.value.length == 0) {
        sub.value = 0
    }
    else {
        if (checkedArr.value.includes(item.id)) {
            sub.value = sub.value - item.retail_price
        }
    }
}
// 点击加按钮事件
const getIdHanlderAddItem = (item: any) => {
    item.number++
    numPrice.value = item.retail_price * item.number
    if (checkedArr.value.length == 0) {
        sub.value = 0
    }
    else {
        if (checkedArr.value.includes(item.id)) {
            sub.value = sub.value + item.retail_price
        }
    }
}

const getIdHanlder = (info: any) => {

    if (checkedArr.value.includes(info.id)) {
        numPrice.value = info.retail_price * info.number
        sub.value += numPrice.value
    }
    else {
        numPrice.value = info.retail_price * info.number
        sub.value = sub.value - numPrice.value
    }
    console.log(numPrice.value);
}

// 点击全选事件
const checkAllHanlder = () => {
    if (checkedAll.value == false) {
        checkedArr.value = []
        sub.value = 0
    } else {
        cartsList.value.forEach(item => {
            checkedArr.value.push(item.id as unknown as string)
            sub.value = sub.value + (item.retail_price * item.number)
        })
    }
}
// 点击单选事件
const checkOneHanlder = (value: number[]) => {
    if (value.length == cartsList.value.length) {
        checkedAll.value = true;
    } else {
        checkedAll.value = false;
    }
}
onMounted(() => {
    getCartsList()
})
</script>

<style scoped lang="scss">
.cart-box {
    position: relative;
    height: 100%;

    .cart-top {
        .van-nav-bar {
            width: 100%;
            height: 46px;
            position: fixed;
            top: 0;
            left: 0;
        }
    }

    .cart-center {
        margin: 0 auto;
        margin-top: 55px;
        width: 100%;
        display: flex;
        height: 50px;
        justify-content: space-around;
        color: rgb(119, 119, 118);
        font-size: 12px;
        align-items: center;
    }

    .cart-content {
        margin: 0 auto;
        padding-left: 15px;

        .cart-content-top {
            width: 345px;
            display: flex;
            align-items: center;

            .cart-content-left {
                margin-left: 10px;
            }

            .delete-button {
                height: 100%;
            }
        }
    }
}
</style>